<!DOCTYPE html>
<html>
<head>
    <title>Tag</title>
    <#include "../../include/head-file.ftl">
</head>
<body>
<div id="form" v-cloak>
    <el-header class="ms-header ms-tr" height="50px">
        <el-button type="primary" icon="iconfont icon-baocun" size="mini" @click="save()" :loading="saveDisabled">保存
        </el-button>
        <el-button size="mini" icon="iconfont icon-fanhui" plain onclick="javascript:history.go(-1)">返回
        </el-button>
    </el-header>
    <el-main class="ms-container" style="position:relative;">
        <el-scrollbar style="height: 100%;">
            <el-tabs v-model="activeName" style="height: calc(100% - 10px);">
                <el-tab-pane style="position:relative;" v-for="(item, index) in editableTabs" :key="index"
                             :label="item.title" :name="item.name">
                    <el-form v-if="item.title=='Tag批量新增,以西文逗号分隔'" ref="form" :model="form" :rules="rules" label-width="120px"
                             size="mini">
                                <el-form-item label="Tags" prop="contentTitles">
                                    <el-input v-model="form.contentTitles"
                                    			type="textarea"
  												:rows="50"
                                                :disabled="false"
                                              :style="{width:  '100%'}"
                                              :clearable="true"
                                              placeholder="请输入Tag">
                                    </el-input>
                                </el-form-item>
                     </el-form>   
                    <div :id="'model'+index" v-else></div>
                </el-tab-pane>
            </el-tabs>
        </el-scrollbar>
    </el-main>
</div>
</body>
</html>
<script>
    var form = new Vue({
        el: '#form',
        data: function () {
            return {
                saveDisabled: false,
                activeName: 'form',
                //自定义模型实例
                model: undefined,
                editableTabs: [{
                    title: 'Tag批量新增,以西文逗号分隔',
                    name: 'form'
                }],
                returnIsShow: true,
                type: '',
                //表单数据
                form: {
                    // Tag
                    titles: '',
                },
                rules: {
                    // Tag
                    contentTitles: [{
                        "required": true,
                        "message": "请填入Tag"
                    }],
                }
            };
        },
        watch: {},
        methods: {
            save: function () {
                var _this = this;

                var that = this; //自定义模型需要验证

                var url = ms.manager + "/cms/contentshuffleTag/save.do";


                this.$refs.form[0].validate(function (valid) {
                    if (valid) {
                        that.saveDisabled = true; //判断

                        // if (that.categoryIdOptions.filter(function (f) {
                        //     return f['id'] == that.form.categoryId;
                        // })[0].categoryType == '2' && that.returnIsShow) {
                        //     that.$notify({
                        //         title: '提示',
                        //         message: '所属栏目不能为封面',
                        //         type: 'error'
                        //     });
                        //     that.saveDisabled = false;
                        //     return;
                        // }


                        ms.http.post(url, that.form.contentTitles.split(","),{}).then(function (data) {
                            if (data.result) {
                                that.$notify({
                                    title: '成功',
                                    message: '保存成功',
                                    type: 'success',
                                    duration: 1000,
                                    onClose: function () {
                                        if (that.returnIsShow) {
                                            javascript: history.go(-1);
                                        } else {
                                            //如果是顶级封面或封面，则重新加载,避免文章和自定义模型重复保存
                                            location.reload();
                                        }
                                        that.saveDisabled = false;
                                    }
                                });

                            } else {
                                that.$notify({
                                    title: '失败',
                                    message: data.msg,
                                    type: 'warning'
                                });
                                that.saveDisabled = false;
                            }

                        });
                    } else {
                        _this.activeName = 'form';
                        return false;
                    }
                });
            },
            
        },
        created: function () {
           
        }
    });
</script>
<style>
    .el-select {
        width: 100%;
    }

    body {
        overflow: hidden;
    }

    #form {
        overflow: hidden;
    }
    .el-scrollbar__bar.is-vertical{
        width: 6px!important;
    }
</style>
